import React, { useState, useEffect, useRef } from "react";
import { Menu, Modal, Button, Checkbox, message } from "antd";
import { AppstoreOutlined } from "@ant-design/icons";
import axios from "axios";
import "../mock/user003002";
import "../mock/user003003";

const { SubMenu } = Menu;
// submenu keys of first level
const rootSubmenuKeys = ["sub1", "sub2", "sub4"];

const WCascader = (props) => {
  // const menus = menuss;
  // console.log(props.menus);
  const [openKeys, setOpenKeys] = React.useState([]);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [menusSrc, setMenusSrc] = useState();
  const [plainOptions, setPlainOptions] = useState();
  const checkboxLabel = useRef();

  /**右侧选中的数据，临时 */
  var checkedList = [];
  /**选中的数据，输出 */
  var exportCheckedList = props.users;
  const CheckboxGroup = Checkbox.Group;

  /**弹出对话框 */
  const showModal = () => {
    setIsModalVisible(true);
  };

  /**确认对画框 */
  const handleOk = () => {
    setIsModalVisible(false);

    /**存储当前组 */
    saveUsers();
  };

  /**关闭对话框 */
  const handleCancel = () => {
    exportCheckedList = [];
    setIsModalVisible(false);
  };

  /**展开菜单 */
  const onOpenChange = (keys) => {
    // console.log(keys);
    const latestOpenKey = keys.find((key) => openKeys.indexOf(key) === -1);
    if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
      setOpenKeys(keys);
    } else {
      setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
    }
  };

  /**创建左侧菜单结构 */
  const changeMenu = (val) => {
    // console.log(val);
    return val.map((v) => {
      // console.log(v.id);
      // console.log(v.children);
      return v.children.length !== 0 ? (
        <SubMenu
          key={v.id}
          title={<span className="nav-text">{v.text}</span>}
          icon={<AppstoreOutlined />}
        >
          {changeMenu(v.children)}
        </SubMenu>
      ) : (
        <Menu.Item key={v.id} icon={<AppstoreOutlined />}>
          <span className="nav-text">{v.text}</span>
        </Menu.Item>
      );
    });
  };
  const putMenu = (val) => {
    setMenusSrc(changeMenu(val));
  };

  /**获取右侧人员列表 */
  const getUser = (e) => {
    /**暂存当前组中选中的数据 */

    saveUsers();
    // let id = e.key;

    axios
      .get("searchUsers.rst?orgId=" + e.key)
      .then((res) => {
        let response = res.data;
        // response = response.data;
        if (response.resultCode === 0) {
          let res = response.result.data;
          if (response.result.total === 0) {
            res = [];
          }
          setPlainOptions(
            res.map((person) => {
              return person.EMPID + "_" + person.EMPNAME;
            })
          );

          /**清空并关闭添加表单 */
        } else {
          message.error("人员数据请求失败");
        }
      })
      .catch((error) => {
        message.error("人员数据请求失败");
      });
  };
  const checkedUser = (peoples, b, c) => {
    checkedList = peoples;
  };
  const saveUsers = () => {
    // console.log(exportCheckedList);
    exportCheckedList = Array.from(
      new Set([...exportCheckedList, ...checkedList])
    );
    /**输出修改 */
    props.changeJoin(exportCheckedList);
  };
  const clickCheckboxLabel = () => {
    console.log("click");
    console.log(checkboxLabel);
  };

  useEffect(() => {
    putMenu(props.menus);
    setPlainOptions(props.users);

    /**操作DOM */
    // var span = document.getElementById("Wcheckbox");
    // checkboxLabel.current
  }, [props.menus]);

  return (
    <>
      <Button type="primary" onClick={showModal}>
        +
      </Button>
      <Modal
        title="修改人员"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
        className="WCascader"
        style={{
          bottom: 0,
          margin: "0px",
          padding: "0px",
          maxWidth: "100vw",
          position: "fixed",
        }}
      >
        <Menu
          mode="inline"
          openKeys={openKeys}
          onOpenChange={onOpenChange}
          style={{ width: 256 }}
          onSelect={getUser}
        >
          {menusSrc}
        </Menu>
        <CheckboxGroup
          options={plainOptions}
          onChange={checkedUser}
          defaultValue={exportCheckedList}
          id="Wcheckbox"
          onClick={clickCheckboxLabel}
          ref={checkboxLabel}
        />
      </Modal>
    </>
  );
};

export default WCascader;
